<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div style="border-color: red;">
        <p style="background-color: rgb(255, 0, 0);"></p>
    </div>
    <div style="background-color: green;">
        <p style="background-color: green;"></p>
    </div>
    <div style="background-color: blue;">
        <p style="background-color: blue;"></p>
    </div>
    <div>
        <p style="background-color:#eee;"></p>
    </div>
    <section></section>
    <script src="../12-24/jquery.js"></script>
    <script>
       var rgba = [0,0,0,1];
       $("div").mousedown(function(event){
           fun(this,event);
           $("div").mousemove(function(event){
               fun(this,event);
           })
       })
       $("div").mousemove(function(event){
           $("div").off("mousemove")
       })

       function fun(that,e){
           var i = $(that).index();
           var w = e.pageX - that.offsetLeft;
           $("p").eq(i).css("width",w+"px");
           rgba[i] = i === 3 ? (w / 500).toFixed(3) : parseInt(w * 255 / 500);
           $("setion").css("background",`rgba(${rgba[0]},${rgba[1]},${rgba[2]},${rgba[3]})`);
       }
    </script>
</body>

</html>